<template>
	<div>
		<template>
			<!-- 搜索条件 -->
			<div class="params">
				<el-form
					ref="ruleForm"
					:model="queryData"
					:rules="rules"
					:inline="true"
					:validate-on-rule-change="false"
				>
					<div v-if="queryData.name1 != '1'">
						<el-form-item
							:label="$t('operation.activity_list.entry') + ':'"
							prop="entranceEnable"
						>
							<template>
								<el-radio
									v-model="queryData.entranceEnable"
									:disabled="!editVisibleChlLid"
									:label="0"
								>
									{{
										$t('operation.activity_list.enable_no')
									}}
								</el-radio>
								<el-radio
									v-model="queryData.entranceEnable"
									:disabled="!editVisibleChlLid"
									:label="1"
								>
									{{ $t('common.start_up') }}
								</el-radio>
							</template>
						</el-form-item>
						<div v-if="queryData.entranceEnable === 1">
							<el-form-item
								v-if="isCn"
								:label="
									$t('operation.activity_list.button') + ':'
								"
								prop="entranceButton"
							>
								<el-input
									v-model="queryData.entranceButton"
									size="mini"
									:placeholder="
										$t('operation.activity_list.more')
									"
									clearable
									style="width: 280px"
									:disabled="!editVisibleChlLid"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="isEn"
								:label="
									$t(
										'operation.activity_list.button_english'
									) + ':'
								"
								prop="enEntranceButton"
							>
								<el-input
									v-model="queryData.enEntranceButton"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 280px"
									:disabled="!editVisibleChlLid"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="isTh"
								:label="
									$t('operation.activity_list.button_thai') +
										':'
								"
								prop="thEntranceButton"
							>
								<el-input
									v-model="queryData.thEntranceButton"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 280px"
									:disabled="!editVisibleChlLid"
								></el-input>
							</el-form-item>
							<el-form-item
								v-if="isVi"
								:label="
									$t(
										'operation.activity_list.button_vietnamese'
									) + ':'
								"
								prop="vieEntranceButton"
							>
								<el-input
									v-model="queryData.vieEntranceButton"
									size="mini"
									:placeholder="$t('common.please_enter')"
									clearable
									style="width: 280px"
									:disabled="!editVisibleChlLid"
								></el-input>
							</el-form-item>
						</div>
					</div>
					<div>
						<el-row>
							<el-col :span="24">
								<span class="left"><i>APP</i></span>
							</el-col>
						</el-row>
						<el-row v-if="isCn">
							<el-col :span="4">
								<el-form-item
									:label="
										$t('operation.activity_list.app_main') +
											':'
									"
									:show-message="true"
									prop="masterPicture"
								>
									<UploadItem
										ref="imgUploadmasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:bounds="{ width: 750, height: 840 }"
										:img-url="queryData.masterPicture"
										@upoladItemSucess="
											handleUploadSucessmasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadmasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatmasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.masterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										750*840{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_share'
										) + ':'
									"
									:show-message="true"
									prop="sharePicture"
								>
									<UploadItem
										ref="imgUpload1sharePicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 550, height: 616 }"
										:img-url="queryData.sharePicture"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										@upoladItemSucess="
											handleUploadSucess1sharePicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload1sharePicture
										"
										@upoladItemDefeat="
											handleUploadDefeat1sharePicture
										"
									></UploadItem>
									<p
										v-if="!queryData.sharePicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										550*616
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t('operation.activity_list.app_list') +
											':'
									"
									:show-message="true"
									prop="listPicture"
								>
									<UploadItem
										ref="imgUpload2listPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 690, height: 320 }"
										:img-url="queryData.listPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2listPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2listPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2listPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.listPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										690*320
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t('operation.activity_list.corner') +
											':'
									"
									prop="listPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in imgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImglistPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImglistPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="isEn">
							<el-col :span="4">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_main_english'
										) + ':'
									"
									:show-message="true"
									prop="enMasterPicture"
								>
									<UploadItem
										ref="imgUploadenMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:bounds="{ width: 750, height: 840 }"
										:img-url="queryData.enMasterPicture"
										@upoladItemSucess="
											handleUploadSucessenMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadenMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatenMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.enMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										750*840{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_share_english'
										) + ':'
									"
									:show-message="true"
									prop="enSharePicture"
								>
									<UploadItem
										ref="imgUpload1enSharePicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 550, height: 616 }"
										:img-url="queryData.enSharePicture"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										@upoladItemSucess="
											handleUploadSucess1enSharePicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload1enSharePicture
										"
										@upoladItemDefeat="
											handleUploadDefeat1enSharePicture
										"
									></UploadItem>
									<p
										v-if="!queryData.enSharePicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										550*616
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_list_english'
										) + ':'
									"
									:show-message="true"
									prop="enListPicture"
								>
									<UploadItem
										ref="imgUpload2enListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 690, height: 320 }"
										:img-url="queryData.enListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2enListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2enListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2enListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.enListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										690*320
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.corner_english'
										) + ':'
									"
									prop="enListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in enImgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgenListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgenListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="isTh">
							<el-col :span="4">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_main_thai'
										) + ':'
									"
									:show-message="true"
									prop="thMasterPicture"
								>
									<UploadItem
										ref="imgUploadthMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:bounds="{ width: 750, height: 840 }"
										:img-url="queryData.thMasterPicture"
										@upoladItemSucess="
											handleUploadSucessthMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadthMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatthMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.thMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										750*840{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_share_thai'
										) + ':'
									"
									:show-message="true"
									prop="thSharePicture"
								>
									<UploadItem
										ref="imgUpload1thSharePicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 550, height: 616 }"
										:img-url="queryData.thSharePicture"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										@upoladItemSucess="
											handleUploadSucess1thSharePicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload1thSharePicture
										"
										@upoladItemDefeat="
											handleUploadDefeat1thSharePicture
										"
									></UploadItem>
									<p
										v-if="!queryData.thSharePicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										550*616
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_list_thai'
										) + ':'
									"
									:show-message="true"
									prop="thListPicture"
								>
									<UploadItem
										ref="imgUpload2thListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 690, height: 320 }"
										:img-url="queryData.thListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2thListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2thListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2thListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.thListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										690*320
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.corner_thai'
										) + ':'
									"
									prop="thListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in thImgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgthListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgthListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="isVi">
							<el-col :span="4">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_main_vietnamese'
										) + ':'
									"
									:show-message="true"
									prop="vieMasterPicture"
								>
									<UploadItem
										ref="imgUploadvieMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:bounds="{ width: 750, height: 840 }"
										:img-url="queryData.vieMasterPicture"
										@upoladItemSucess="
											handleUploadSucessvieMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadvieMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatvieMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.vieMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										750*840{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_share_vietnamese'
										) + ':'
									"
									:show-message="true"
									prop="vieSharePicture"
								>
									<UploadItem
										ref="imgUpload1vieSharePicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 550, height: 616 }"
										:img-url="queryData.vieSharePicture"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										@upoladItemSucess="
											handleUploadSucess1vieSharePicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload1vieSharePicture
										"
										@upoladItemDefeat="
											handleUploadDefeat1vieSharePicture
										"
									></UploadItem>
									<p
										v-if="!queryData.vieSharePicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										550*616
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.app_list_vietnamese'
										) + ':'
									"
									:show-message="true"
									prop="vieListPicture"
								>
									<UploadItem
										ref="imgUpload2vieListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 690, height: 320 }"
										:img-url="queryData.vieListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2vieListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2vieListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2vieListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.vieListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										690*320
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.corner_vietnamese'
										) + ':'
									"
									prop="vieListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in viImgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgvieListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgvieListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div>
						<el-row>
							<el-col :span="24">
								<span class="left"><i>PC</i></span>
							</el-col>
						</el-row>
						<el-row v-if="isCn">
							<el-col :span="4">
								<el-form-item
									:label="
										$t('operation.activity_list.pc_main') +
											':'
									"
									:show-message="true"
									prop="pcMasterPicture"
								>
									<UploadItem
										ref="imgUploadpcMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 3840, height: 1248 }"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:img-url="queryData.pcMasterPicture"
										@upoladItemSucess="
											handleUploadSucesspcMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadpcMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatpcMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.pcMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										3840*1248
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t('operation.activity_list.pc_list') +
											':'
									"
									:show-message="true"
									prop="pcListPicture"
								>
									<UploadItem
										ref="imgUpload2pcListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 924, height: 528 }"
										:img-url="queryData.pcListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2pcListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2pcListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2pcListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.pcListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										924*528
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t('operation.activity_list.corner') +
											':'
									"
									prop="pcListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in imgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgpcListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgpcListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="isEn">
							<el-col :span="4">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.pc_main_english'
										) + ':'
									"
									:show-message="true"
									prop="enPcMasterPicture"
								>
									<UploadItem
										ref="imgUploadenPcMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 3840, height: 1248 }"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:img-url="queryData.enPcMasterPicture"
										@upoladItemSucess="
											handleUploadSucessenPcMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadenPcMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatenPcMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.enPcMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										3840*1248{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.pc_list_english'
										) + ':'
									"
									:show-message="true"
									prop="enPcListPicture"
								>
									<UploadItem
										ref="imgUpload2enPcListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 924, height: 528 }"
										:img-url="queryData.enPcListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2enPcListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2enPcListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2enPcListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.enPcListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										924*528
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.corner_english'
										) + ':'
									"
									prop="enPcListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in enImgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgenPcListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgenPcListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="isTh">
							<el-col :span="4">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.pc_main_thai'
										) + ':'
									"
									:show-message="true"
									prop="thPcMasterPicture"
								>
									<UploadItem
										ref="imgUploadthPcMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 3840, height: 1248 }"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:img-url="queryData.thPcMasterPicture"
										@upoladItemSucess="
											handleUploadSucessthPcMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadthPcMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatthPcMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.thPcMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										3840*1248{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.pc_list_thai'
										) + ':'
									"
									:show-message="true"
									prop="thPcListPicture"
								>
									<UploadItem
										ref="imgUpload2thPcListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 924, height: 528 }"
										:img-url="queryData.thPcListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2thPcListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2thPcListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2thPcListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.thPcListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										924*528
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.corner_thai'
										) + ':'
									"
									prop="thPcListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in thImgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgthPcListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgthPcListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="isVi">
							<el-col :span="4">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.pc_main_vietnamese'
										) + ':'
									"
									:show-message="true"
									prop="viePcMasterPicture"
								>
									<UploadItem
										ref="imgUploadviePcMasterPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 3840, height: 1248 }"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										:fileSize="fileSize"
										:img-url="queryData.viePcMasterPicture"
										@upoladItemSucess="
											handleUploadSucessviePcMasterPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUploadviePcMasterPicture
										"
										@upoladItemDefeat="
											handleUploadDefeatviePcMasterPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.viePcMasterPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										3840*1248{{
											$t('operation.activity_list.size')
										}}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.pc_list_vietnamese'
										) + ':'
									"
									:show-message="true"
									prop="viePcListPicture"
								>
									<UploadItem
										ref="imgUpload2viePcListPicture"
										:upload-file-type="'image'"
										:platform="'PC'"
										:bounds="{ width: 924, height: 528 }"
										:img-url="queryData.viePcListPicture"
										:fileSize="fileSize"
										:disabled="!editVisibleChlLid"
										:uploadAPI="uploadAPI"
										@upoladItemSucess="
											handleUploadSucess2viePcListPicture
										"
										@startUpoladItem="handleStartUpload"
										@deleteUpoladItem="
											handleDeleteUpload2viePcListPicture
										"
										@upoladItemDefeat="
											handleUploadDefeat2viePcListPicture
										"
									></UploadItem>
									<p
										v-if="!queryData.viePcListPicture"
										class="imgTip"
									>
										{{
											$t('operation.activity_list.tip')
										}}：
										<br />
										924*528
										{{ $t('operation.activity_list.size') }}
									</p>
								</el-form-item>
							</el-col>
							<el-col :span="9">
								<el-form-item
									:label="
										$t(
											'operation.activity_list.corner_vietnamese'
										) + ':'
									"
									prop="viePcListPictureIcon"
								>
									<template>
										<div
											v-for="(item, index) in viImgArr"
											:key="index"
											class="imgArr"
										>
											<span
												v-for="(item1, i) in item"
												:key="i"
												style="margin: 0 5px"
											>
												<img
													style="width: 35px; height: 35px; object-fit: contain"
													:src="item1.img"
													alt="404"
													:class="[
														item1.img ===
														activeImgviePcListPictureIcon
															? 'active'
															: ''
													]"
													@click="
														checkImgviePcListPictureIcon(
															item1.img,
															i
														)
													"
												/>
											</span>
										</div>
									</template>
									<p style="color: red">
										{{
											$t(
												'operation.activity_list.comment'
											)
										}}
									</p>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</div>
		</template>
	</div>
</template>

<script>
import list from '@/mixins/list'
import UploadItem from '@/components/UploadItemLimit'
import { imgArr, enImgArr, thImgArr, viImgArr } from './imgArr.js'

const language = ['', 'en', 'th', 'vie']
const terminal = ['', 'pc']

const picture = [
	'masterPicture',
	'sharePicture',
	'listPicture',
	'listPictureIcon'
]

const format = (array) => {
	if (!Array.isArray(array) || !array.length) return []
	const res = array.reduce((prev, next) => {
		let res = []
		if (Array.isArray(prev) && Array.isArray(next)) {
			res = prev
			if (res.length === 0) {
				res = next
			} else {
				const array = []
				next.forEach((item) => {
					res.forEach((subItem) => {
						if (subItem) {
							item = item
								? item.charAt(0).toUpperCase() + item.slice(1)
								: item
						}
						array.push(subItem + item)
					})
				})
				res = array
			}
		}
		return res
	}, [])
	return res.filter((item) => !item.toUpperCase().includes('PCSH'))
}
const mark = format([language, terminal, picture])

export default {
	name: 'FrontEndConfiguration',
	components: {
		UploadItem
	},
	mixins: [list],
	props: {
		editVisible: {
			type: Boolean,
			default: () => false
		},
		deviceType: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			editVisibleChlLid: false,
			imgArr: imgArr,
			enImgArr: enImgArr,
			thImgArr: thImgArr,
			viImgArr: viImgArr,
			...mark.reduce((prev, next) => {
				prev[`activeImg${next}`] = null
				return prev
			}, {}),
			queryData: {
				...mark.reduce((prev, next) => {
					prev[next] = ''
					return prev
				}, {}),
				entranceEnable: 0,
				entranceButton: '',
				enEntranceButton: '',
				thEntranceButton: '',
				vieEntranceButton: ''
			}
		}
	},
	computed: {
		isCn() {
			return (
				this.languages.includes('cn') ||
				this.languages.includes('zh') ||
				this.languages.includes('ZH') ||
				this.languages.includes('zh_CN') ||
				this.languages.includes('中文')
			)
		},
		isEn() {
			return (
				this.languages.includes('EN') ||
				this.languages.includes('en') ||
				this.languages.includes('en_US') ||
				this.languages.includes('英文')
			)
		},
		isTh() {
			return (
				this.languages.includes('TH') ||
				this.languages.includes('th') ||
				this.languages.includes('th_TH') ||
				this.languages.includes('泰文')
			)
		},
		isVi() {
			return (
				this.languages.includes('VI') ||
				this.languages.includes('vi') ||
				this.languages.includes('vi_VN') ||
				this.languages.includes('越南文')
			)
		},
		languages() {
			let merchantInfo = this.$route.query.merchantInfo
			merchantInfo = merchantInfo ? JSON.parse(merchantInfo) : {}
			const languages = merchantInfo.languages || ''
			return languages.split(',')
		},
		uploadAPI() {
			return this.$api.displayPageUploadImage
		},
		fileSize() {
			return 5 * 1024 * 1024
		},
		mark() {
			const deviceType = this.deviceType || []
			const res = mark.filter((item) => {
				const isPc = deviceType.includes('PC')
				const isAPP =
					deviceType.toString().includes('APP') ||
					deviceType.toString().includes('H5')
				let res = false
				if (isAPP && !item.toUpperCase().includes('PC')) {
					res = true
				}
				if (isPc && item.toUpperCase().includes('PC')) {
					res = true
				}
				return res
			})
			return res
		},
		rules() {
			const object = this.mark.reduce((prev, next) => {
				let message = this.$t('operation.activity_list.upload')
				if (next.includes('istPictureIcon')) {
					message = this.$t('common.please_choose')
				}
				prev[next] = [
					{ required: true, message, trigger: ['change', 'blur'] }
				]
				return prev
			}, {})
			return {
				...mark.reduce((prev, next) => {
					let message = this.$t('operation.activity_list.upload')
					if (next.includes('istPictureIcon')) {
						message = this.$t('common.please_choose')
					}
					prev[next] = [
						{
							required: false,
							message,
							trigger: ['change', 'blur']
						}
					]
					return prev
				}, {}),
				...object,
				entranceEnable: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'change'
					}
				],
				entranceButton: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'change'
					}
				],
				enEntranceButton: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'change'
					}
				],
				thEntranceButton: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'change'
					}
				],
				vieEntranceButton: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'change'
					}
				]
			}
		}
	},
	watch: {
		editVisible: {
			handler(val) {
				this.$nextTick(() => {
					this.editVisibleChlLid = val
				})
			},
			deep: true,
			immediate: true
		},
		// 检测前端配置图片传给父级
		queryData: {
			handler(value) {
				this.$nextTick(() => {
					this.mark.forEach((item) => {
						if (item.includes('asterPicture')) {
							if (value[item] || this.queryData[item]) {
								this.$nextTick(() => {
									this.$refs[`imgUpload${item}`] &&
										(this.$refs[`imgUpload${item}`].state =
											'image')
									this.$refs[`imgUpload${item}`] &&
										(this.$refs[
											`imgUpload${item}`
										].fileUrl = this.queryData[item])
								})
							}
						}
						if (item.includes('harePicture')) {
							if (value[item] || this.queryData[item]) {
								this.$nextTick(() => {
									this.$refs[`imgUpload1${item}`] &&
										(this.$refs[`imgUpload1${item}`].state =
											'image')
									this.$refs[`imgUpload1${item}`] &&
										(this.$refs[
											`imgUpload1${item}`
										].fileUrl = this.queryData[item])
								})
							}
						}
						if (
							item.includes('istPicture') &&
							!item.includes('istPictureIcon')
						) {
							if (value[item] || this.queryData[item]) {
								this.$nextTick(() => {
									this.$refs[`imgUpload2${item}`] &&
										(this.$refs[`imgUpload2${item}`].state =
											'image')
									this.$refs[`imgUpload2${item}`] &&
										(this.$refs[
											`imgUpload2${item}`
										].fileUrl = this.queryData[item])
								})
							}
						}
						if (item.includes('istPictureIcon')) {
							if (value[item]) {
								this.queryData[item] = value[item]
								this[`activeImg${item}`] = value[item]
							}
						}
					})
					if (value.entranceButton) {
						this.queryData.entranceButton = value.entranceButton
					}
					if (value.enEntranceButton) {
						this.queryData.enEntranceButton = value.enEntranceButton
					}
					if (value.thEntranceButton) {
						this.queryData.thEntranceButton = value.thEntranceButton
					}
					if (value.vieEntranceButton) {
						this.queryData.vieEntranceButton =
							value.vieEntranceButton
					}
				})
				const dataValue = {
					...this.mark.reduce((prev, next) => {
						prev[next] = this.queryData[next]
						return prev
					}, {}),
					entranceEnable: this.queryData.entranceEnable || 0,
					entranceButton: this.queryData.entranceButton,
					enEntranceButton: this.queryData.enEntranceButton,
					thEntranceButton: this.queryData.thEntranceButton,
					vieEntranceButton: this.queryData.vieEntranceButton
				}
				this.$emit('handleFrontVal', dataValue)
			},
			// immediate: true,
			deep: true
		}
	},
	methods: {
		check(field) {
			this.$nextTick(() => {
				this.$refs.ruleForm.validateField(field)
			})
		},
		...mark.reduce((prev, next) => {
			if (next.includes('istPictureIcon')) {
				prev[`checkImg${next}`] = function(img) {
					this[`activeImg${next}`] = img
					this.queryData[next] = img
					this.check(next)
				}
			}
			return prev
		}, {}),
		handleStartUpload() {
			this.$message.info(this.$t('operation.activity_list.upload_start'))
		},
		...mark.reduce((prev, next) => {
			if (next.includes('asterPicture')) {
				prev[`handleUploadSucess${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = file.imgUrl
					this.check(next)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (next.includes('harePicture')) {
				prev[`handleUploadSucess1${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = file.imgUrl
					this.check(next)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (
				next.includes('istPicture') &&
				!next.includes('istPictureIcon')
			) {
				prev[`handleUploadSucess2${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = file.imgUrl
					this.check(next)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (next.includes('asterPicture')) {
				prev[`handleUploadDefeat${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = ''
					this.check(next)
					this.$message.error(
						this.$t('operation.activity_list.upload_fail')
					)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (next.includes('harePicture')) {
				prev[`handleUploadDefeat1${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = ''
					this.check(next)
					this.$message.error(
						this.$t('operation.activity_list.upload_fail')
					)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (
				next.includes('istPicture') &&
				!next.includes('istPictureIcon')
			) {
				prev[`handleUploadDefeat2${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = ''
					this.check(next)
					this.$message.error(
						this.$t('operation.activity_list.upload_fail')
					)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (next.includes('asterPicture')) {
				prev[`handleDeleteUpload${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = ''
					this.check(next)
					this.$message.warning(
						this.$t('operation.activity_list.picture_remove')
					)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (next.includes('harePicture')) {
				prev[`handleDeleteUpload1${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = ''
					this.check(next)
					this.$message.warning(
						this.$t('operation.activity_list.picture_remove')
					)
				}
			}
			return prev
		}, {}),
		...mark.reduce((prev, next) => {
			if (
				next.includes('istPicture') &&
				!next.includes('istPictureIcon')
			) {
				prev[`handleDeleteUpload2${next}`] = function({
					index,
					file,
					id
				}) {
					this.queryData[next] = ''
					this.check(next)
					this.$message.warning(
						this.$t('operation.activity_list.picture_remove')
					)
				}
			}
			return prev
		}, {})
	}
}
</script>

<style lang="scss" scoped>
.imgArr {
	.active {
		border: 1px solid #fff;
		background-color: red;
		transform: scale(1.5);
	}
}
.left {
	height: 45px;
	border-left: 6px solid #2a2727;
	i {
		margin-left: 5px;
	}
}
</style>
